<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
// import { onRenderTriggered, onRenderTracked } from 'vue'
// import HeavyComp from './components/HeavyComp.vue'
// import { useDefer } from './useDefer'
import { showMsg } from './components/ShowMsg.ts'
// import Smothup from './components/SmothUp.vue'
import DeboundRef from './components/DeboundRef.vue'
import SlottDemo from './components/SlottDemo.vue'
import XScroll from './components/XScroll.vue'

const chickHander = () => {
  const close = showMsg('提示信息', () => {
    close()
  })
}


// onRenderTracked((event)=>{
//   // debugger
// })

// onRenderTriggered((event) => {
//   // debugger
// })
// 逐步安帧 渲染
// const defer = useDefer()
</script>

<template>
  <!-- <div class="container">
    <div v-for="n in 100">
      <heavy-comp :idnubmer="n" v-if="defer(n)"></heavy-comp>
    </div>
  </div> -->
  <div class="container2 grid gap-4">
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
    <DeboundRef />
    <button class="button" @click="chickHander">显示提示框</button>
    <!-- <Smothup /> -->
    <SlottDemo msg="hello caogy"/>
  </div>
  <!-- 横向滚动 -->
   <div class="container3">
      <XScroll>
        <div class="card-list">
            <div class="item">
              <img src="https://picsum.photos/300/200?random=1" alt="Image 1">
              <p>图片 1</p>
            </div>
            <div class="item">
              <img src="https://picsum.photos/300/200?random=2" alt="Image 2">
              <p>图片 2</p>
            </div>
            <div class="item">
              <img src="https://picsum.photos/300/200?random=3" alt="Image 3">
              <p>图片 3</p>
            </div>
            <div class="item">
              <img src="https://picsum.photos/300/200?random=4" alt="Image 4">
              <p>图片 4</p>
            </div>
            <div class="item">
              <img src="https://picsum.photos/300/200?random=5" alt="Image 5">
              <p>图片 5</p>
            </div>
          </div>
      </XScroll>
   </div>
</template>

<style lang="scss">
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;

}
.container3 {
  width: 1000px;
  height: 300px;
  margin: 0 auto;
}

.container2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  .item:nth-child(odd) {
    background-color: bisque;
  }

  .item:nth-child(even) {
    background-color: greenyellow;
  }
}
.card-list {
  .item {
  display: inline-block;
  width: 300px;
  margin: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.item p {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}
}
</style>
